<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>README</title>


<style type="text/css">
body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url() no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: black; }

h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 14px; }

h6 {
  color: #777777;
  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0; }

hr {
  background: transparent url() repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0;
}

body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

li p.first {
  display: inline-block; }
li {
  margin: 0; }
ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0;border-collapse: collapse; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

sup {
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
}

kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #bbb
}

* {
	-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
    body {
        width: 854px;
        margin:0 auto;
    }
}
@media print {
	table, pre {
		page-break-inside: avoid;
	}
	pre {
		word-wrap: break-word;
	}
}
</style>


</head>

<body>

<h1 id="toc_0">angular ui-tabs</h1>

<p>实现类似于浏览器的tab页功能</p>

<h2 id="toc_1">安装</h2>

<p>引入库文件</p>

<div><pre><code class="language-markup">    &lt;script src=&quot;ui-tabs.js&quot;&gt;</code></pre></div>

<p>添加模块依赖</p>

<div><pre><code class="language-javascript">    angular.module(&#39;myModule&#39;, [&#39;ui.tabs&#39;])</code></pre></div>

<h2 id="toc_2">uiTabs - service</h2>

<p>该服务用于打开，关闭，刷新，激活tab页</p>

<h3 id="toc_3">open(options)</h3>

<p>用于打开一个tab页，所打开的controller中，可以注入<code>uiTabsParams</code><code>uiTab</code>两个参数，<code>uiTabsParams</code>表示打开时，传入的参数，<code>uiTab</code>表示目前打开的tab页</p>

<h5 id="toc_4">Parameters</h5>

<ol>
<li>options <code>object</code> &nbsp;&nbsp;&nbsp;tab的配置

<ul>
<li>name tab页名称</li>
<li>controller controller名称</li>
<li>template 模版</li>
<li>templateUrl 模版地址，template和templateUrl选一</li>
<li>params 传递的参数，当tab页的controller加载时，通过uiTabsParams注入</li>
</ul></li>
</ol>

<h4 id="toc_5">returns</h4>

<p><code>Promise</code> 打开tab页时，返回 promise</p>

<h4 id="toc_6">events</h4>

<ol>
<li><p>tabOpenStart</p>

<p>当tab刚被打开时，此时触发<code>tabOpenStart</code>事件，此时可以通过<code>preventDefault</code>方法阻止tab的打开</p></li>
<li><p>tabOpenStarting</p>

<p>当开始加载tab页内容时，此时触发<code>tabOpenStarting</code>事件，此时已经无法阻止tab的打开</p></li>
<li><p>tabOpenSuccess</p>

<p>当tab页打开成功时，触发<code>tabOpenSuccess</code>事件</p></li>
<li><p>tabOpenError</p>

<p>当tab页加载templateUrl时，或者用户在<code>tabOpenStart</code>时，通过<code>preventDefault</code>阻止tab打开时，触发<code>tabOpenError</code>事件</p></li>
</ol>

<h4 id="toc_7">examples</h4>

<div><pre><code class="language-javascript">app.controller(&#39;MyController&#39;, function($scope, uiTabs){

    $scope.$on(&#39;tabOpenSuccess&#39;, function(event, tab, lastTab){
        console.log(tab.name);
    });
    
    uiTabs.open({
        name: &#39;tab1&#39;,
        controller: &#39;TabController&#39;,
        template: &#39;&lt;div&gt;tab1&lt;/div&gt;&#39;,
        params: {
            transfer: &#39;transfer&#39;
        }
    });
});

app.controller(&#39;TabController&#39;, function($scope, uiTabsParams, uiTab){

    console.log(uiTabsParams.transfer);
    console.log(uiTab.name);
    
})</code></pre></div>

<h3 id="toc_8">close(tab)</h3>

<p>用于关闭一个tab页</p>

<h4 id="toc_9">Parameters</h4>

<ol>
<li>tab <code>Object|string</code> tab页实例，或者该tab页的id</li>
</ol>

<h4 id="toc_10">returns</h4>

<p><code>boolean</code> 是否关闭成功</p>

<h4 id="toc_11">events</h4>

<ol>
<li><p>tabCloseStart</p>

<p>当tab开始关闭时，触发<code>tabCloseStart</code>, 并且可以通过<code>preventDefault</code>方法阻止tab页的关闭</p></li>
<li><p>tabCloseSuccess</p>

<p>当tab关闭成功时，触发<code>tabCloseSuccess</code></p></li>
<li><p>tabCloseError</p>

<p>当通过<code>preventDefault</code>阻止tab关闭时，触发<code>tabCloseError</code>事件</p></li>
</ol>

<h4 id="toc_12">examples</h4>

<div><pre><code class="language-javascript">app.controller(&#39;MyController&#39;, function($scope, uiTabs){
  uiTabs.close(&#39;tab1&#39;);
})</code></pre></div>

<h3 id="toc_13">closeAll()</h3>

<p>用于关闭所有tab页，并且每一个的tab页的关闭，都会触发<code>tabCloseStart</code><code>tabCloseSuccess</code>或者<code>tabCloseError</code>事件，且无法阻止tab页的关闭</p>

<h4 id="toc_14">examples</h4>

<div><pre><code class="language-javascript">app.controller(&#39;MyController&#39;, function($scope, uiTabs){
  uiTabs.closeAll();
})</code></pre></div>

<h3 id="toc_15">active(tab)</h3>

<p>用于切换当前tab页</p>

<h4 id="toc_16">Parameters</h4>

<ol>
<li>tab <code>Object|string</code> tab页实例，或者该tab页的id</li>
</ol>

<h4 id="toc_17">returns</h4>

<p><code>boolean</code> 切换是否成功</p>

<h4 id="toc_18">events</h4>

<ol>
<li><p>tabChangeStart</p>

<p>当切换当前tab页时，触发<code>tabChangeStart</code>, 并且可以通过<code>preventDefault</code>方法阻止tab页的切换</p></li>
<li><p>tabChangeSuccess</p>

<p>当当前tab页切换成功时，触发<code>tabChangeSuccess</code></p></li>
<li><p>tabChangeError</p>

<p>当通过<code>preventDefault</code>阻止tab切换时，触发<code>tabChangeError</code>事件</p></li>
</ol>

<h4 id="toc_19">examples</h4>

<div><pre><code class="language-javascript">app.controller(&#39;MyController&#39;, function($scope, uiTabs){
  uiTabs.active(&#39;tab1&#39;);
})</code></pre></div>

<h3 id="toc_20">refresh(tab)</h3>

<p>刷新tab页</p>

<h4 id="toc_21">Parameters</h4>

<ol>
<li>tab <code>Object|string</code> tab页实例，或者该tab页的id</li>
</ol>

<h4 id="toc_22">events</h4>

<ol>
<li><p>tabRefresh</p>

<p>当刷新tab页时，触发<code>tabRefresh</code>, 无法阻止刷新</p></li>
</ol>

<h4 id="toc_23">examples</h4>

<div><pre><code class="language-javascript">app.controller(&#39;MyController&#39;, function($scope, uiTabs){
  uiTabs.refresh(&#39;tab1&#39;);
})</code></pre></div>

<h2 id="toc_24">uiTabsView - directive</h2>

<p>tab页放置的容器，当通过页面操作造成的刷新，关闭，当前页的切换都会触发相应的事件</p>

<h4 id="toc_25">examples</h4>

<div><pre><code class="language-markup">&lt;ui-tabs-view&gt;&lt;/ui-tabs-view&gt;</code></pre></div>




</body>

</html>
